<template>
    <div class="weather">
        <h5 class="timeShow">{{formatDate(nowDate,1)}}&nbsp;{{nowDate.getHours()+':'+nowDate.getMinutes()}}</h5>
        <div class="content">
            <div class="leftBox">
                <!-- 图片 -->
                <div class="imgBox">
                    <img :src="require('@/assets/imgs/yc/'+returnImgUrl(todayDate.type)+'.png')" >
                </div>
                <!-- 温度 -->
                <div class="tempBox">
                    <div class="tempNum"> 
                        {{wendu}}
                    </div>
                    <div class="tempRight">
                        <div class="t">
                            ℃
                        </div>
                        <div class="b">
                            {{todayDate.type}}({{city}})
                        </div>
                        
                    </div>
                </div>
                <div class="info">
                    <p>{{todayDate.low.slice(2)+'~'+todayDate.high.slice(2)}}</p>
                    <p>{{todayDate.type}}</p>
                    <p>{{todayDate.fengxiang}}</p>
                    <p>{{nowTimeMonth+'月' +todayDate.date.slice(0,3)}}</p>
                    <p><span class="time">{{getDayFormat(nowDate.getDay())}}</span></p>
                </div>

            </div>
            <div class="rightBox" v-for="(con,i) of this.weatherDate" :key="i">
                <div class="rightCeil">
                    <!-- 月份 -->
                    <h3>{{getDayFormat(timeNext(i+1).getDay())}}</h3>
                    <!-- 时间 -->
                    <p><span class="time">{{formatDate(timeNext(i+1),0)}}</span></p>
                    <div class="imgBox">
                        <img :src="require(`@/assets/imgs/yc/${returnImgUrl(con.type)}.png`)" >
                    </div>
                    <div class="info">
                        <p>{{con.low.slice(2)+'~'+con.high.slice(2)}}</p>
                        <p>{{con.type}}</p>
                        <p>{{con.fengxiang}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.weather {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    /* background: radial-gradient(200% 100% at bottom center, rgb(120, 132, 238), #ccc, #0e75eb); */
    background-color: #4479d4;
    color: white;
    overflow: hidden;
    border-radius: 5px;
}
.content {
    display:flex;
}
.leftBox {
    min-width: 186px;
    height: 340px;
    /* background-color: orange; */
    padding: .5rem 0;
    
}
.rightBox {
    flex-grow: 1;
    display:flex;
    justify-content:space-evenly;
    padding: 1rem 0;
}
.imgBox {
    height: 60px;
    text-align: center;
}
.imgBox>img{
    width: 50px;
    height: 50px;
}
.tempBox {
    height: 64px;
    display: flex;
}
.tempNum {
    width: 100px;
    font-size: 48px;
    text-align: right;
}
.tempRight {
    flex-grow: 1;
}
.tempRight {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
}
.info {
    text-align: center;
}
.rightCeil {
    width: 25%;
    min-width:89px;
    text-align:center;
    border-left:1.5px solid #ccc;
    border-right:1.5px solid #ccc;
}
.timeShow {
    text-align:center;
    height: 55px;
    line-height: 55px;
    font-size: 20px;
    margin: 0;
}
p {
    padding: .9rem 0;
}
.leftBox p {
    padding: .5rem 0;
}
h5 {
    margin: .5rem 0;
}
.time {
    border-radius: 5px;
    background-color: olivedrab;
    width: 60%;
    padding: .1rem .6rem;
}
</style>

<script>
// 'http://wthrcdn.etouch.cn/weather_mini?city=' + cityName
export default {
    data(){
        return {
            // 现在时间
            nowTimeMonth:new Date().getMonth()+1,
            nowDate:new Date(),
            timer:null
        }
    },
    props:['weatherDate','todayDate','wendu',"city"],
    beforeCreate(){
        this.timer=setInterval(()=>{
            this.nowDate=new Date()
        },60000)
    },
    methods:{
        formatDate(instance,type){
            if(type===1) {
                return instance.getFullYear()+'年'+(instance.getMonth()+1)+'月'+instance.getDate()+'日'
            }else {
                return instance.getMonth()+1+'月'+instance.getDate()+'日'
            }
            
        },
        tempFormat(){
            if(this.todayDate.low&&this.todayDate.high){
                return todayDate.low.slice(2)+'~'+todayDate.high.slice(2)
            } 
        },
        // 对图片展示进行判断
        returnImgUrl(type){
            if(type=='阴'){
                return 3;
            }
            if(type.indexOf("雨")>0){
                if(type.indexOf("小")>0){
                    return 10;
                }
                if(type.indexOf("大雨")>0){
                    return 10;
                }
                return 8;
            }
            if(type.indexOf("阳")>0){
                return 1;
            }
            if(type.indexOf("雪")>0){
                if(type.indexOf("小雪")>0){
                    return 16;
                }
                if(type.indexOf("大雪")>0){
                    return 20;
                }
                return 19;
            }
            if(type.indexOf("雷")>0){
                return 15;
            }
            if(type.indexOf("多云")>0){
                return 4;
            }
            return 3;

            
        },
        // 已一天时间推算下一天 后一天
        timeNext(nextNum){
           let curDate=new Date();
           return new Date(curDate.getTime() + 24*60*60*1000*nextNum);
        },
        // 星期处理
        getDayFormat(num){
            switch(num){
                case 0:
                    return '星期天'
                    break;
                case 1:
                    return '星期一'
                    break;  
                case 2:
                    return '星期二'
                    break;
                case 3:
                    return '星期三'
                    break; 
                case 4:
                    return '星期四'
                    break;  
                case 5:
                    return '星期五'
                    break;
                case 6:
                    return '星期六'
                    break;
            }
        }
    },
}
</script>